import { memo, MutableRefObject, useCallback, useRef, useState } from "react"
import { useObserve } from "../hooks/useObserve";

export interface photoProps {
  url: string
}
const YiPhoto: React.FC<photoProps> = ({ url }) => {
  const [isInView, setIsInView] = useState(false);
  const imgRef = useRef<HTMLDivElement>(null);
  useObserve(imgRef as MutableRefObject<HTMLDivElement>, useCallback(() => {
    setIsInView(true);
  }, []));

  return (

    <div ref={imgRef} className="bg-gray-700 rounded-xl shadow-md overflow-hidden  hover:scale-105 cursor-pointer" >
      <a href={url} download={url} target="_blank">
        {
          isInView ? (< img src={url} alt="照片" className="w-full h-full" />) : null
        }
      </a>
    </div >
  )
}

export default memo(YiPhoto)